<template>
    <div class="age-ratio">
        <el-row type="flex" justify="space-between" align="middle" v-for="{range, percentage} in ratioArray"
                :key="range" class="progress-row">
            <el-col :span="3" class="range">
                {{range}}
            </el-col>
            <el-col :span="18">
                <el-progress :show-text="false" :stroke-width="14" :percentage="percentage" />
            </el-col>
            <el-col :span="3" class="percentage">{{ percentage / 100}}%</el-col>
        </el-row>
        <el-row type="flex" justify="space-between" align="middle" class="progress-row">
            <el-col :span="3" />
            <el-col :span="18" class="caption">
                <span>0</span>
                <span>20%</span>
                <span>40%</span>
                <span>60%</span>
                <span>80%</span>
                <span>100%</span>
            </el-col>
            <el-col :span="3" />
        </el-row>
    </div>
</template>

<script>
import { subComponentMixin } from '@/mixins/user-data'
export default {
  name: 'AgeRatio',
  mixins: [subComponentMixin],
  data () {
    return {
      ratioArray: [
        {
          range: '18岁以下',
          percentage: 88
        }, {
          range: '18岁以下',
          percentage: 88
        }, {
          range: '18岁以下',
          percentage: 88
        }, {
          range: '18岁以下',
          percentage: 88
        }, {
          range: '18岁以下',
          percentage: 88
        }, {
          range: '18岁以下',
          percentage: 88
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    .age-ratio {
        .progress-row {
            & + .progress-row {
                margin-top: $gap-default;
            }
            .percentage {
                margin-left: $gap-default;
            }
            .caption {
                display: flex;
                justify-content: space-between;
            }
            .range, .percentage, .caption {
                font-weight: bold;
            }
        }
    }
</style>
